<style>
.panel-heading{border-radius:3px;}
.panel-danger-box{box-shadow: 5px 0 0 0 #a94442 inset;}
.panel-warning-box{box-shadow: 5px 0 0 0 #8A6D3B inset;}
.panel-success-box{box-shadow: 5px 0 0 0 #3C763D inset;}
.panel-info-box{box-shadow: 5px 0 0 0 #31708f inset;}
</style>
<div class="panel-group" ng-show="groups">
	<div class="clearfix">
		<h3 ng-bind="ack" class="pull-left"></h3>
		<span class="pull-right">
			<br>
			select
			<button class="btn btn-default btn-xs" ng-click="select(true)">all</button>
			<button class="btn btn-default btn-xs" ng-click="select(false)">none</button>
		</span>
		<span class="pull-right with-selected" ng-show="anySelected">
			with selected
			<br>
			<a class="btn btn-primary btn-sm" ng-click="multiaction('note')">note</a>
			<a class="btn btn-primary btn-sm" ng-click="multiaction('ack')" ng-disabled="!canAckSelected">acknowledge</a>
			<a class="btn btn-warning btn-sm" ng-click="multiaction('close')" ng-disabled="!canCloseSelected">close</a>
			<a class="btn btn-danger btn-sm" ng-click="multiaction('forget')" ng-disabled="!canForgetSelected">forget</a>
			<a class="btn btn-default btn-sm" ng-href="{{history()}}">History</a>
		</span>
	</div>
	<div class="panel" ng-class="panelClass(group.Status)" ng-repeat="group in groups" ng-init="idx = $index">
		<div class="panel-heading" ng-class="panelClass(group.CurrentStatus)+'-box'" ng-click="collapse(idx)">
			<h4 class="panel-title">
				<label class="pull-right select">
					<input type="checkbox" class="pull-right" ng-model="group.checked" ng-click="click($event, $index)" ng-change="update()">
				</label>
				<a href>
					<span title="This exclamation icon represents that the alert is in an active (non-normal) state." class="fa" ng-class="{'fa-exclamation-circle': group.Active}"></span>
					<span title="This mute icon represents that the alert has been silenced." class="fa" ng-class="{'fa-volume-off': group.Silenced}"></span>
					<span ng-bind="group.Subject"></span>
					<span class="pull-right">{{group.Children.length}} alerts</span>
				</a>
			</h4>
		</div>
		<div class="panel-body panel-group" ng-if="shown[idx]">
			<div
				class="panel"
				ng-class="panelClass(group.Status)"
				ng-repeat="child in group.Children"
				ts-state ts-grp="{{idx}}" ts-grpStatus="{{group.CurrentStatus}}">
			</div>
		</div>
	</div>
</div>
